﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryPaging.aspx.cs" Inherits="jQueryPaging" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="js/plugin/jTemplates/jquery-jtemplates.js" type="text/javascript"></script>
    <link href="skins/jQueryPaging.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

        // Initialize this and store globally for tracking state.
        var currentPage = 1;

        // Initialize this to 1, so that "Next" is disabled until
        //  GetItemCount returns and we know there's a second page.
        var lastPage = 1;

        // Set this to any integer you like. 5-7 works well
        //  with the FeedBurner data source.
        var pageSize = 4;

        $(document).ready(function () {
            // On page load, display the first page of results.
            DisplayRSS(1);

            // Simultaneously, begin loading the total item count.
            GetRSSItemCount();
        });

        function DisplayRSS(page) {
            $.ajax({
                type: "POST",
                url: "jQueryPaging.aspx/GetFeeds",
                data: "{'PageSize':'" + pageSize + "', 'PageNumber':'" + page + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    // Render the resulting data, via template.
                    ApplyTemplate(msg);

                    // Wireup appropriate paging functionality.
                    UpdatePaging();
                }
            });
        }

        function showResult(result) {
            alert(result.d[0].Description);
        }

        function GetRSSItemCount() {
            $.ajax({
                type: "POST",
                url: "jQueryPaging.aspx/GetFeedsCount",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    // msg.d will contain the total number of items, as
                    //  an integer. Divide to find total number of pages.
                    lastPage = Math.ceil(msg.d / pageSize);

                    // Wireup appropriate paging functionality.
                    UpdatePaging();
                }
            });
        }

        function DisplayProgressIndication() {
            // Hide both of the paging controls,
            //  to avoid click-happy users.
            $('.paging').hide();

            // Clean up our event handlers, to avoid memory leaks.
            $('.paging').unbind();

            // Store the height of the content area of the table.
            var height = $('#RSSTable tbody').height();

            // Replace the entire content area with a single row/cell.
            $('#RSSTable tbody').html('<tr><td colspan="3"></td></tr>');

            // Set that row's height to be the same as previous.
            $('#RSSTable tbody tr').height(height);

            // Add our centered progress indicator animation to it.
            $('#RSSTable tbody td').addClass('loading');
        }

        function ApplyTemplate(msg) {
            // Changed the template extension from .tpl to .htm, 
            // To avoid the request being blocked by some IIS installs.
            $('#Container').setTemplateURL('Template/RSSTable.htm', null, { filter_data: false });
            $('#Container').processTemplate(msg);
        }

        function UpdatePaging() {

            $('#totalRecord').html(currentPage + "_" + lastPage);

            // If we're not on the first page, enable the "Previous" link.            
            if (currentPage != 1) {
                $('#PrevPage').attr('href', '#');
                $('#PrevPage').click(PrevPage);
            }

            // If we're not on the last page, enable the "Next" link.
            if (currentPage != lastPage) {
                $('#NextPage').attr('href', '#');
                $('#NextPage').click(NextPage);
            }
        }

        function NextPage(evt) {
            // Prevent the browser from navigating needlessly to #.
            //取消事件的默认动作。
            evt.preventDefault();

            // Entertain the user while the previous page is loaded.
            DisplayProgressIndication();

            // Load and render the next page of results, and
            //  increment the current page number.
            DisplayRSS(++currentPage);
        }

        function PrevPage(evt) {
            // Prevent the browser from navigating needlessly to #.
            evt.preventDefault();

            // Entertain the user while the previous page is loaded.
            DisplayProgressIndication();

            // Load and render the previous page of results, and
            //  decrement the current page number.
            DisplayRSS(--currentPage);
        }
    </script>
</head>
<body>
    <div id="Container">
        <table id="RSSTable" cellspacing="0">
            <thead>
                <tr>
                    <th>
                        &nbsp;
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="loading">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <form id="form1" runat="server">
    </form>
</body>
</html>
